<template>
  <view class="homeBox">
    <view class="home-box">
      <!-- 商品列表 -->
      <view
        class="shop-list"
        v-if="shopList.length>0"
      >
        <view
          v-for="(item, index) in shopList"
          :key="index"
          class="shop-item"
          @click="goPage('/page_home/planDetail?id='+item.id)"
        >
          <!-- 商品图片 -->
          <image
            :src="host+item.icon"
            mode="aspectFill"
            class="shop-image"
          ></image>
          <!-- 商品信息 -->
          <view class="shop-info">
            <!-- 标题 -->
            <text class="shop-title">{{ item.name }}</text>
            <!-- 名字 -->
            <text class="shop-name">{{ item.tags?item.tags.join('-'):'-' }}</text>
            <!-- 时间 -->
            <!-- <text class="shop-time">时间：{{ $publicFun.GetTime(item.validTimeStart).slice(0,10)  }}-{{ $publicFun.GetTime(item.validTimeEnd).slice(0,10)  }}</text> -->
            <view class="shop-info-bottom">
              <!-- 地点 -->
              <text class="shop-location">地点：{{ item.region }}</text>
              <!-- 价格 -->
              <text class="shop-price"><text class="price-icon">￥</text>
                {{ item.currentLowestUnitPrice/100 }}</text>
            </view>
          </view>
        </view>
        <uLoadMore
          v-if="shopList.length>10"
          :status="more"
        ></uLoadMore>
      </view>
      <sunui-template
        v-else
        title="快去收藏喜欢的商品吧~"
      />
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import uLoadMore from '@/components/uni-load-more/uni-load-more.vue'
import uniPicker from '@/components/uni_picker/uni_picker.vue'
export default {
  name: 'uni_home',
  components: {
    uLoadMore,
  },
  data() {
    return {
      imgUrl: this.$apiFun.imgUrl,
      host: this.$apiFun.host,
      more: 'more', //noMore more loading
      NewsList: [], //输入框轮播文案
      // 输入框轮播
      indicatorDots1: false,
      autoplay1: true,
      vertical1: true,
      interval1: 5000,
      duration1: 1000,
      circular1: true,
      shopList: [],
      paramObj: {
        page: 1,
        pageSize: 10,
      },
    }
  },
  watch: {},
  computed: {
    //login_status 0 未登录 、1临时微信登录 2已登录
    ...mapGetters(['login_status']),
  },
  async onLoad(option) {
    this.init()
  },
  methods: {
    async init() {
      this.more = 'loading'
      let { datas } = await this.$apiFun.getApi(
        this.$api.collectedListApi,
        this.paramObj
      )
      uni.hideLoading()
      if (datas.length > 0) {
        this.shopList = this.shopList.concat(datas)
        this.more = 'more'
      } else {
        this.more = 'noMore'
      }
    },

    goPage(url) {
      uni.navigateTo({
        url: url,
      })
    },
    manClick() {
      this.$nextTick(() => {
        this.$refs['info'].open()
      })
    },
    pBtn(e) {
      this.paramObj.orderBy = e.id
      console.log(e, this.paramObj)
    },
    openAddr() {
      this.$refs['addressBox'].open()
    },
    addrFun(val) {
      console.log('val---------', val)
    },
    findFun() {
      uni.showLoading()
      this.paramObj.page = 1
      this.shopList = []
      this.init()
    },
  },
  onReachBottom() {
    this.paramObj.page++
    this.init()
  },
  onPullDownRefresh() {},
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
page {
  width: 100%;
  height: 100%;
  background: #000000;
  color: #6c6c6c;

  .homeBox {
    width: 100%;
    height: 100%;
  }

  .home-box {
    padding: 0 15rpx;
    box-sizing: border-box;
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 180rpx;
    z-index: 1;
  }

  .homenav {
    height: 100rpx;
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #ffffff;
    z-index: 1;

    .homenavL {
      display: flex;
      align-items: center;
      min-width: 120rpx;
      font-size: 28rpx;

      .dibiao {
        width: 45rpx;
        height: 30rpx;
        margin-right: 10rpx;
        color: #fd8585;
      }
    }

    .homenavR {
      display: flex;
      align-items: center;
      width: 100%;
      // padding: 0 0 0 10rpx;
      box-sizing: border-box;
      position: relative;
      flex: 1;

      .homenavRSousuo {
        position: absolute;
        z-index: 1;
        color: white;
        left: 30rpx;
        color: #8243da;
      }

      .swiper1 {
        width: 100%;
        height: 60rpx;
        // background-color: rgba(0, 0, 0, .1);
        border: 1rpx solid #8243da;
        margin: 0 auto;
        border-radius: 60rpx;
        padding: 0 50rpx 0 80rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        color: rgba(255, 255, 255,1);
        line-height: 60rpx;
        width: 100%;
        overflow: hidden;

        .swiper1View {
          white-space: nowrap;
        }
      }
    }

    .qiandao {
      width: 50rpx;
      height: 50rpx;
      margin-left: 20rpx;
    }
  }

  .homeSelect {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #68686a;

    .homeSelect-img {
      width: 35rpx;
      height: 30rpx;
      margin-left: 10rpx;
    }
  }

  .homenavSelect {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    background-color: white;
    height: 80rpx;
  }

  /* 商品列表 */
  .shop-list {
    margin-top: 15rpx;
    display: flex;
    flex-direction: column;

    /* 竖向排列 */
    /* 单个商品项 */
    .shop-item {
      display: flex;
      align-items: center;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      // background-color: rgba(255, 255, 255, 0.1);
      border-radius: 10rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    /* 商品图片 */
    .shop-image {
      border-radius: 10rpx;
      width: 140rpx;
      height: 200rpx;
    }

    /* 商品信息 */
    .shop-info {
      flex: 1;
      padding: 0;
      margin-left: 20rpx;
    }

    /* 商品标题 */
    .shop-title {
		height: 85rpx;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 1);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* 限制文本显示为2行 */
      -webkit-box-orient: vertical;
      /* 垂直排列盒子 */
      overflow: hidden;
      /* 隐藏超出部分 */
      text-overflow: ellipsis;
      /* 显示省略号 */
      margin-bottom: 10rpx;
    }

    .shop-name {
      text-overflow: ellipsis;
      width: 400rpx;
      overflow: hidden;
      white-space: nowrap;
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 5rpx;
    }

    .shop-time {
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 5rpx;
    }

    .shop-info-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      /* 商品地点 */
      .shop-location {
        display: block;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 10rpx;
      }

      /* 商品价格 */
      .shop-price {
        display: block;
        font-size: 30rpx;
        color: #f87fa8;
        font-weight: bold;

        .price-icon {
          font-size: 18rpx;
        }
      }
    }
  }
}
</style>